[30天 JavaScript 從無到有 Day 19] BOM & DOM

第 12 屆 iThome 鐵人賽

DAY 19

自我挑戰組

前端我來了 - 30天 JavaScript 從無到有系列第 19 篇

12th鐵人賽 javascript

蘇

2020-09-19 02:05:53

686 瀏覽

分享至

瀏覽器物件模型(Browser Object Model, BOM)

瀏覽器所有功能的核心
與網頁的內容無關
核心 : window 物件
所有的 BOM 都能透過 window 進行存取
所有的全域變數、函式、物件 -> 都是屬於 window 物件。

Window 對於瀏覽器

ECMAScript 標準裡的 Global Object
JavaScript 與瀏覽器溝通的窗口

文件物件模型(Document Object Model, DOM)

連結網頁與 Scripts
管理 HTML 架構 -> 樹狀圖
每筆資料都是一個節點(Node)
每個節點皆為物件(Object)且擁有各自的屬性以及方法
每個節點的屬性與方法 -> 網頁架構、風格和內容
JavaScript <- Interaction/Manipulation -> DOM

DOM 是由節點組成的，即所有的 Node 組成了一個檔案數，HTML 中的每個元素、屬性、內容等都代表著其中一個節點，並不斷延伸

     document
      <head>                          <bode>
<title>                             <a> <herf>
<cola>  <sprite>           <我的標題> <xxx>  <xx> <>

依據不同的樹狀圖往下

JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作

BOM vs DOM
BOM -> JavaScript 與瀏覽器溝通的窗口，不涉及網頁內容。
DOM -> JavaScript 用來控制網頁的節點與內容的標準。

常用 (DOM Element Object)

.id -> 特定 element 的 id
.nodeName -> 特定 element 的節點名稱(無法更變標籤)
.innerHTML -> 特定標籤下所有的內容
.textContent -> 特定標籤下的文字內容

Ex :.parentNode 搭配 .nodeName -> 節點名稱

新手練功中，如有錯誤觀念，歡迎指正! 明天進入實作~不知道會不會有趣點
課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 : https://www.happycoding.today/posts/43
https://medium.com/change-or-die/javascript%E5%88%9D%E5%AD%B8-dom%E5%B8%B8%E7%94%A8%E5%B1%AC%E6%80%A7%E8%88%87%E6%96%B9%E6%B3%95-ef851afdb65a
https://www.w3schools.com/jsref/dom_obj_all.asp
https://www.w3schools.com/jsref/dom_obj_document.asp
https://ithelp.ithome.com.tw/articles/10094965

[30天 JavaScript 從無到有 Day 18] this & this practice

[30天 JavaScript 從無到有 Day 20] 小遊戲 pig game -1 Setup and QuerySelectorr

系列文

前端我來了 - 30天 JavaScript 從無到有共 30 篇

RSS系列文訂閱系列文

13 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

前端我來了 - 30天 JavaScript 從無到有 系列 第 19 篇

[30天 JavaScript 從無到有 Day 19] BOM & DOM

尚未有邦友留言

標記使用者

前端我來了 - 30天 JavaScript 從無到有系列第 19 篇